<template>
  <view class="notNotice">
    <view class="notice" v-for="(item, index) in notIceList" :key="index" @click="hrefList(item.url)">
      <image :src="item.image"></image>
      <view class="noticeSmall">
        <view class="noRead">
          <view class="count">
            {{item.title}}
            <view class="countNum" v-if="!!item.noBrowseCount && item.noBrowseCount < 100">{{item.noBrowseCount}}</view>
            <view class="countNum" v-if="!!item.noBrowseCount && item.noBrowseCount > 99">99+</view>
          </view>
          <text>{{item.createTime}}</text>
        </view>
        <view class="newsIo">{{item.msgTitle}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { noticeTypes } from '@/api/newsNotice'
import { tdkUrl } from '@/common/common'
export default {
  data() {
    return {
      notIceList: [
        {
          image: './static/notice.png',
          url: '/newNotice/configNotice',
          title: '服务通知'
        },
        {
          image: './static/discount.png',
          url: '/newNotice/transNotice',
          title: '交易物流'
        },
        {
          image: './static/logistics.png',
          url: '/newNotice/speciPromo',
          title: '优惠促销'
        },
        {
          image: './static/customer.png',
          title: '鑫方盛客服',
          msgTitle: '工作时间 9:00-20:00',
          timer: ''
        },
      ]
    }
  },
  onShow() {
    this.noticeTypes()
  },
  methods: {
    serviceFn() {
      if (!this.vuex_loginStatus) {
        this.onLoginButtonClick()
        return
      }
      // #ifdef MP-ALIPAY || MP-WEIXIN
      uni.navigateTo({ url: '/customer/index' })
      // #endif
      // #ifdef H5
      window.location.href = tdkUrl.develop + '/customer'
      // #endif
    },
    onLoginButtonClick() {
      const callbackUrl = `/pages/myAccount/index`
      uni.navigateTo({
        url: `/login/login/codeLogin?type=my&callbackUrl=${callbackUrl}`
      })
      // this.loginEvent(null, 'order');
    },
    hrefList(url = '') {
      if (!!url) {
        uni.navigateTo({ url })
      } else {
        this.serviceFn()
      }
    },
    getTimeOther(time) {
      var date = new Date();
      var year = date.getFullYear() // 获取当前年份
      var timestamp = new Date().getTime() //获取当前时间时间戳
      var thisTime = new Date(time.replace(/-/g, '/')).getTime(); //获取指定时间时间戳
      const [showDate, showTime] = time.split(' ') ?? []
      if (!time.includes(year)) return time // 非当年的消息：展示为【XXXX年X月X日 XX:XX】
      if ((timestamp - thisTime) / 1000 <= 60) return '刚刚' // 1分钟内的消息：展示为【刚刚】
      if ((timestamp - thisTime) / 1000 <= (24 * 60 * 60)) return `今天 ${showTime}` // 当日内的消息：展示为【今天 XX:XX】
      const noYearDate = showDate.split('-').slice(1).join('-')
      return `${noYearDate} ${showTime}` // 当年内的消息：展示为【X月X日 XX:XX
      // if (!time.includes(year)) {
      //   return time // 非本年
      // } else if ((timestamp - thisTime) / 1000 <= 60) {
      //   return '刚刚' // 1分钟内
      // } else if ((timestamp - thisTime) / 1000 <= (24 * 60 * 60)) {
      //   return '当日内'
      // } else {
      //   return '当年内'
      // }
    },
    async noticeTypes() {
      const { memberId } = this.vuex_memberInfo
      const params = {
        memberId
      }
      const res = await noticeTypes(params)
      if (res.errorCode == '0') {
        var notIceList = [...this.notIceList]
        var getDataList = res.data.noticeTypes.map((item) => {
          return { ...item, createTime: this.getTimeOther(item.createTime) }
        })
        getDataList.forEach((item) => {
          if (item.noticeType == 10) {
            notIceList[0].image = './static/notice.png'
            notIceList[0].url = '/newNotice/configNotice'
            notIceList[0].title = '服务通知'
            notIceList[0] = { ...item, ...notIceList[0] }
          } else if (item.noticeType == 20) {
            notIceList[2].image = './static/logistics.png'
            notIceList[2].url = '/newNotice/speciPromo'
            notIceList[2].title = '优惠促销'
            notIceList[2] = { ...item, ...notIceList[2] }
          } else {
            notIceList[1].image = './static/discount.png'
            notIceList[1].url = '/newNotice/transNotice'
            notIceList[1].title = '交易物流'
            notIceList[1] = { ...item, ...notIceList[1] }
          }
        })
        this.notIceList = notIceList
      }
    }
  }
}
</script>

<style scoped lang="scss">
.notNotice {
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  .notice {
    padding: 24rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    border-radius: 8px;
    margin-bottom: 16rpx;
    image {
      width: 88rpx;
      height: 88rpx;
      margin-right: 24rpx;
      flex-shrink: 0;
    }
    .noticeSmall {
      width: 100%;
      color: #999999;
      font-size: 24rpx;
      font-weight: 400;
      .noRead {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
      }
      .count {
        display: flex;
        align-items: center;
        align-content: center;
        color: #222222;
        font-size: 28rpx;
        font-weight: 400;
      }
      .countNum {
        min-width: 38rpx;
        border-radius: 14rpx;
        background: #FF5533;
        color: #FFFFFF;
        font-size: 20rpx;
        font-weight: 400;
        padding: 0rpx 5rpx;
        box-sizing: border-box;
        margin-left: 12rpx;
        text-align: center;
      }
      .newsIo {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 1;
        -webkit-line-clamp: 1;
      }
    }
  }
}
</style>